<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
     body{
        width: 100%;
        height: 100%;
    }
    /* 顶部部分————登录 */
    .cycle{
        width: 120px;
        height: 120px;
        background-color:white;
        border-radius:50%;
        border:2px solid #33b17b;
        top: 50px;
        left: 120px;
        position: relative;
    }
    .cycle1{
        width:110px ;
        height:110px ;
        background-color:#33b17b;
        border-radius:50%;
        border:2px solid white;
        top: -68px;
        left: 125px;
        position: relative;
    }
    .text{
        margin-top: 30px;
        margin-left: 29px;
        color: white;
        font-size: 30px;
    }
    .top{
        display: flex;
		justify-content:flex-start;
    }
    .text1{
        /* margin-left: 30px; */
        color: #505050;
        font-size: 20px;
        margin-left: 20px;
    }
    .line{
        width: 4px;
        height: 25px;
        background-color:#e6e8eb;
        opacity: 0.3;
        margin-top: 2px;
        margin-left: 20px;
    }

    /* 中间部分————图片 */
    .kuang{
        height:420px;
        background-color: #f2f4f8;
        margin-top: 20px;
        opacity: 0.4;
    }
    .tu{
        height:auto;
        margin-top:100px;
        margin-left: 30px;
    }

    /* 底部部分 */
    .bottom{
        height:11px; 
        background-color: #f8f8f8;
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        
    }
    .logo{
        height: 50px;
        width: 50px;
        margin-top: 20px;
        margin-left: 35px;
    }
    
    .text2{
        height: 30px;
        color: #505050;
        font-size:20px;
        text-align:center;
        margin-left: 30px;
    }
    
  
    
    
 
</style>
<body>
    
    <div>
        <!-- 顶部部分 -->
        <!-- 外框 -->
        <div class="cycle"></div>
        <!-- 遮盖层 -->
        <div class="cycle1">
            <p class="text">登录</p>
        </div>
        <div class="top">
            <p class="text1">我的订阅</p>
            <div class="line"></div>
            <p class="text1">我的收藏</p>
            <div class="line"></div>
            <p class="text1">我的下载</p>
        </div>
       
       <!-- 中间部分 -->
       <div class="kuang">
           <img class="tu" src="../jpg/1.png" >
       </div>

       <!-- 底部部分 -->
       <div  class="bottom">
           <div>
            <img class="logo" src="../jpg/首页.png" >
            <p class="text2">首页</p>
           </div>
           <div>
            <img class="logo"  src="../jpg/分类.png" >
            <p class="text2">分类</p>
           </div>
           <div>
            <img class="logo" src="../jpg/我的学习.png" >
            <p class="text2">我的学习</p>
           </div>
           <div>
            <img class="logo" src="../jpg/账号.png" >
            <p class="text2">账号</p>
           </div>
           
        </div>
          
    </div>
   
</body>
</html>